<template>
  <el-drawer
    direction="rtl"
    v-model:visible="isShowDialog"
    @close="handleBtnClick({ type: 'close' })" v-model="isShowDialog" :size="px2vw('842px')">
    <template #header>
      <div class="flex-center font-bold pl-[12px]">新增</div>
    </template>

    <div class="pl-[12px]">

      <div class="bg-[rgba(55,33,255,0.03)] rounded-[8px] px-[18px] py-[18px] text-[#524E74]">
        <Icon icon="ep:bell-filled" color="#3721FF"/>
        配送说明：主要用于对物流配送时效性，偏远地区时效、运费等情况的说明
      </div>

      <div class="mt-[30px]">
        <el-form :model="form" :rules="rules" ref="FormRef" label-width="110px"
                 label-position="left">
          <el-form-item
            v-for="(item,index) in config"
            :key="index"
            :prop="item.code" :label="item.name">
            <el-input
              v-if="!item.type || item.type == 'text'"
              v-model="form[item.code]"
            />

            <el-input type="textarea"
                      v-if=" item.type == 'textarea'"
                      v-model="form[item.code]"
                      rows="10"
            />


            <el-select v-model="form[item.code]"
                       @change="onChange(item.code)"
                       v-if="item.type == 'select'"
            >
              <el-option v-for="(it,idx) in item.list" :key="idx"
                         :label="it[item.label]" :value="it[item.value]"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>


    </div>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBtnClick({ type: 'close' })">取 消</el-button>
        <el-button type="primary" @click="handleBtnClick({ type: 'confirm' })">确 定</el-button>
      </div>
    </template>

  </el-drawer>
</template>
<script setup lang="ts">
import {formError, listToMap, px2vw} from "@/utils";
import QueryTable from "@/components/TableData/index.vue"
import Icon from "@/components/Icon/src/Icon.vue";
import ImagePreview from "@/components/ImagePreview/index.vue"
import {confirmPromote} from "@/utils";
import {GlobeStateApi} from "@/api/logistics/globestate";

import {GlobeStateInstructionsApi} from "@/api/logistics/instruction";
import { getGlobeState } from '@/api/publicInterf'


const FormRef = ref(null);

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: false,
    default: () => false
  },
  info: {
    type: Object,
    required: false,
    default: () => {
    }
  }
})

const emit = defineEmits(['update:modelValue', 'confirm']);

const isShowDialog = ref(false);

const config = ref([
  {
    type: "select",
    name: "地区",
    code: "stateId",
    required: true,
    type: "select",
    label: "stateName",
    value: "id",
    list: []
  },
  {
    name: "语言",
    code: "language",
    type: "select",
    label: "name",
    value: "name",
    list: []
  },
  {
    name: "配送说明",
    type: "textarea",
    code: "stateInstructions"
  }
])

const rules = computed(() => {
  let map = listToMap(config.value, 'code');
  for (let i in map) {
    map[i] = [{required: true, message: `请输入${map[i].name}`, trigger: 'blur'}]
  }

  return map
})

const form = ref({})

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }

}

const fn = {

  confirm() {
    FormRef.value && FormRef.value.validate(bool => {
      if (bool) {
        fn.close();
        let list = config.value.find(at => {
          return at.code == "stateId"
        })?.list
        let item = list.find(at => {
          return at.id == form.value.stateId
        })

        console.log(item, list)

        emit('confirm', {
          type: 'delivery', data: {
            info: props.info,
            form: {
              ...form.value,
              stateName: item.stateName
            }
          }
        })
      } else {
        formError();
      }
    })

  },
  close() {
    emit('update:modelValue', false)
  }
}

const onChange = async code => {
  if (code == "stateId") {
    //TODO
    getLanguages()

  }
}

const getLanguages = async () => {
  let callback = await GlobeStateApi.getLanguage({
    id: form.value.stateId
  })

  let item = config.value.find(at=>{
    return at.code == "language"
  })

  item.list = callback.map(item=>{
    return {
      name:item
    }
  })

}

const getAreaList = async () => {
  let res = await getGlobeState();
  let item = config.value.find(at => {
    return at.code == "stateId"
  })
  item.list = res || [];

}


onMounted(() => {
  getAreaList();
})


watch(() => props.modelValue, () => {
  console.log(props.modelValue, "====================")
  isShowDialog.value = props.modelValue;
  form.value = props.info
})

</script>
<style lang="scss" scoped>
.info {
  border: solid 1px #F3F3F3;
  border-radius: 8px;
  overflow: hidden;

  .item {
    border-bottom: solid 1px #F3F3F3;
    border-right: solid 1px #F3F3F3;

    &:nth-last-of-type(1), &:nth-last-of-type(2) {
      border-bottom: solid 0px #F3F3F3;
    }

    &:nth-of-type(2n) {
      border-right: solid 0px #F3F3F3;
    }


  }
}
</style>
